<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-30 15:00:30
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-28 15:41:09
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\Authorization\Dictionary\components\EditDictType.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="tsx">
import { Form, FormSchema } from "@/components/Form";
import { useForm } from "@/hooks/web/useForm";
import { computed, PropType, ref, watch } from "vue";
import { usePatrolGroupStore } from "@/store/modules/PlanGroupStore";
import { schema, rules } from "./PublicTableData";
import { ScheduleSendTaskDetailType } from "@/api/linePatrol/type";
import { ElTabs, ElTabPane, ElTimePicker, ElRadioGroup, ElRadio } from "element-plus";
const GroupStore = usePatrolGroupStore();
const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<ScheduleSendTaskDetailType>>,
    default: () => null,
  },
  DisabledForm: {
    type: Boolean as PropType<boolean>,
    default: () => null,
  },
});
const FacTaskList = computed(() => {
  return GroupStore.getFacTaskListAll;
}); //任务组名称列表
// 生成新数组
const newItem: FormSchema = {
  field: "taskId",
  label: "任务组名称",
  component: "Select",
  colProps: {
    span: 15,
  },
  componentProps: {
    options: FacTaskList.value.map((item: any) => {
      if (item.taskName) {
        return {
          label: `任务组名称：${item.taskName}`,
          value: item.id,
        };
      } else {
        return {
          label: `任务组名称：${item.groupName}`,
          value: item.id,
        };
      }
    }),
  },
};
const newArray = ref<FormSchema[]>([...schema.slice(0, 1), newItem, ...schema.slice(1)]);

const { formRegister, formMethods } = useForm();
const { setValues, getFormData, getElFormExpose } = formMethods;
const freq = ref("0"); //区分频率
const paramTo = ref(1); //星期、每月几日
const paramNo = ref(1); //月份
const execTime = ref(); //时间
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return;
    setValues(currentRow);
    if (JSON.stringify(currentRow) !== "{}") {
      execTime.value = currentRow.execTime;
      freq.value = String(currentRow.freq);
      paramTo.value = Number(currentRow.paramTo);
      paramNo.value = Number(currentRow.paramNo);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const submit = async () => {
  const elForm = await getElFormExpose();
  const valid = await elForm?.validate().catch((err) => {
    console.log(err);
  });
  if (valid) {
    const formData = await getFormData();
    formData["planType"] = GroupStore.activeName;
    formData["freq"] = Number(freq.value);
    switch (freq.value) {
      case "0":
        formData["execTime"] = execTime.value;
        break;
      case "1":
        formData["execTime"] = execTime.value;
        formData["paramTo"] = Number(paramTo.value);
        break;
      case "2":
        formData["execTime"] = execTime.value;
        formData["paramTo"] = Number(paramTo.value);
        break;
      case "3":
        formData["execTime"] = execTime.value;
        formData["paramTo"] = Number(paramTo.value);
        formData["paramNo"] = Number(paramNo.value);
        break;
      default:
    }
    return formData;
  }
};
defineExpose({
  submit,
});
const WeekData = () => {
  return [
    {
      label: "星期一",
      value: 2,
    },
    {
      label: "星期二",
      value: 3,
    },
    {
      label: "星期三",
      value: 4,
    },
    {
      label: "星期四",
      value: 5,
    },
    {
      label: "星期五",
      value: 6,
    },
    {
      label: "星期六",
      value: 7,
    },
    {
      label: "星期日",
      value: 1,
    },
  ];
};
// log
</script>
<template>
  <Form
    :disabled="props.DisabledForm"
    :schema="newArray"
    @register="formRegister"
    :rules="rules"
  />
  <div class="RateStyle">
    <span>重复执行频率</span>
    <ElTabs v-model="freq" type="border-card" style="width: 80%" class="demo-tabs">
      <ElTabPane label="每日" name="0">
        <span>执行时间：</span>
        <ElTimePicker
          :disabled="props.DisabledForm"
          value-format="HH:mm:ss"
          v-model="execTime"
          placeholder="任意时间点"
        />
      </ElTabPane>
      <ElTabPane label="每周" name="1">
        <ElRadioGroup v-model="paramTo">
          <ElRadio
            :disabled="props.DisabledForm"
            v-for="item in WeekData()"
            :key="item.value"
            :label="item.value"
            border
            >{{ item.label }}</ElRadio
          >
        </ElRadioGroup>
        <span>执行时间：</span>
        <ElTimePicker
          :disabled="props.DisabledForm"
          value-format="HH:mm:ss"
          v-model="execTime"
          placeholder="任意时间点"
        />
      </ElTabPane>
      <ElTabPane label="每月" name="2">
        <ElRadioGroup v-model="paramTo">
          <ElRadio
            :disabled="props.DisabledForm"
            v-for="item in 31"
            :key="item"
            :label="item"
            >{{ item }}</ElRadio
          >
        </ElRadioGroup>
        <span>执行时间：</span>
        <ElTimePicker
          :disabled="props.DisabledForm"
          value-format="HH:mm:ss"
          v-model="execTime"
          placeholder="任意时间点"
        />
      </ElTabPane>
      <ElTabPane label="每年" name="3">
        <span> 选择月份：</span>
        <ElRadioGroup v-model="paramNo" style="margin: 10px 0">
          <ElRadio
            :disabled="props.DisabledForm"
            v-for="item in 12"
            :key="item"
            :label="item"
            >{{ item }}</ElRadio
          >
        </ElRadioGroup>
        <span>选择日期：</span
        ><ElRadioGroup style="margin: 10px 0" v-model="paramTo">
          <ElRadio
            :disabled="props.DisabledForm"
            v-for="item in 31"
            :key="item"
            :label="item"
            >{{ item }}</ElRadio
          >
        </ElRadioGroup>
        <span>执行时间：</span>
        <ElTimePicker
          :disabled="props.DisabledForm"
          value-format="HH:mm:ss"
          v-model="execTime"
          placeholder="任意时间点"
      /></ElTabPane>
    </ElTabs>
  </div>
</template>
<style scoped lang="less">
/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
.FormHead {
  /* font-size: 18px; */
  font-weight: 600;
}
.el-radio.is-bordered {
  margin-bottom: 10px;
}
:deep(.el-col) {
  margin: 5px 0;
}
:deep(.el-form-item__label) {
  display: inline-block !important;
}
.label {
  font-size: 15px;
  font-weight: 800;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  width: 80%;
  float: right;
}
.RateStyle {
  display: flex;
  padding: 0 20px;
  span {
    font-weight: 800;
    margin-right: 10px;
  }
}
</style>
@/store/modules/PlanGroupApi
